<template>
  <div class="keep">
    <div class="count">
      <div class="max">
        <div class="top">
          <h4>查询条件</h4>
        </div>
        <div class="mastiongs">
          <div class="bottom">
            用户账号:<input type="text" placeholder="1654222">
            运动类型:<select>
              <option value="">全部</option>
              <option value="">跑步</option>
              <option value="">深蹲</option>
              <option value="">迎卧起坐</option>
              <option value="">俯卧撑</option>
            </select>
            日期:<div class="block">
              <span class="demonstration"></span>
              <el-date-picker v-model="value2" type="daterange" unlink-panels range-separator="To" start-placeholder="2019.11" end-placeholder="2020.12" :shortcuts="shortcuts" :size="size" />
            </div>
            <div class="reset">重置</div>
            <div class="inquire">查询</div>
          </div>
        </div>
      </div>
    </div>

    <el-table :data="tableData.list" height="500" style="width: 95%;margin:0 auto;" highlight-current-row>
      <el-table-column prop="zhanghao" label="用户账号" width="180" />
      <el-table-column prop="name" label="用户昵称" width="180" />
      <el-table-column prop="paobujuli" label="跑步距离" width="180" />
      <el-table-column prop="shendun" label="深蹲数量" width="180" />
      <el-table-column prop="yingwoqizuo" label="迎卧起坐数量" width="180" />
      <el-table-column prop="fuwochangshuliang" label="俯卧撑数量" width="180" />
      <el-table-column prop="address" label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small" @click.prevent="chakan(scope.row)">查看</el-button>
          <el-button link type="primary" size="small" @click.prevent="deleteRow(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang='ts'>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";
import { useCounterStore } from "../../stores/counter";

const router = useRouter();
// 点击查看跳转路由并且传参
const chakan = (row) => {
  router.push({
    path: "/maxindex/compiletwo/",
    query: { id: JSON.stringify(row) },
  });
};

//定义响应式数据
var tableData = reactive({ list: [] });

const store = useCounterStore();
let data1 = ref(JSON.parse(store.counttwo));
// console.log(data1._rawValue.list);

let huoquid = data1._rawValue.list.map((parameter) => {
  return parameter.id;
});
var id = huoquid;
// console.log(id);

//定义响应式数据
onMounted(() => {
  tableData.list = data1._rawValue.list;
  // console.log(tableData.list);
});

//  删除
const deleteRow = (www) => {
  let a = tableData.list.findIndex((item) => {
    return item.id == www.id;
    // console.log(www);
  });
  if (a != -1) {
    tableData.list.splice(a, 1);
  }
};

const size = ref<"" | "large" | "small">("");

const value1 = ref("");
const value2 = ref("");

const shortcuts = [
  {
    text: "Last week",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: "Last month",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: "Last 3 months",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
</script>

<style scoped lang='scss'>
.mastiongs {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.el-main {
  margin: 0 auto;
}
.keep {
  width: 100%;
  height: 120px;
  // background-color: pink;
  .count {
    width: 95%;
    height: 80%;
    margin: 0 auto;
    // background-color: aqua;
    .top {
      width: 100%;
      height: 35%;
      // background-color: red;
      display: flex;
      align-items: center;
    }
    .bottom {
      width: 100%;
      // flex: 1;
      height: 65%;
      // background-color: orange;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .reset {
        width: 60px;
        height: 30px;
        // background-color: red;
        border: 1px solid gray;
        text-align: center;
        line-height: 30px;
        border-radius: 10px;
      }
      .inquire {
        width: 60px;
        height: 30px;
        background-color: #00a9ff;
        text-align: center;
        line-height: 30px;
        border-radius: 10px;
        color: #fff;
      }
      input {
        width: 130px;
        height: 30px;
        border-radius: 5px;
        border: 1px solid gray;
        outline: none;
        // border: none;
        text-align: center;
      }
      select {
        width: 130px;
        height: 30px;
        border-radius: 5px;
        border: 1px solid gray;
        outline: none;
        // border: none;
        text-align: center;
      }
    }
  }
}
</style>

